﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../src/test.css" rel="stylesheet" />
	<script src="../../vendor/js/jquery.js"></script>
	<script src="../../dist/js/ud2.js"></script>
</head>
<body>

	<h3>按钮样式</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>按钮样式</h5>
			<p>
				<button class="btn">默认按钮</button>
				<button class="btn info">信息按钮</button>
				<button class="btn warning">警告按钮</button>
				<button class="btn success">成功按钮</button>
				<button class="btn danger">危险按钮</button>
				<button class="btn" disabled="disabled">被禁用按钮</button>
				<button class="btn info disabled">被禁用样式按钮</button>
			</p>

			<hr class="hr" />

			<h5>颜色样式</h5>
			<p>
				<button class="btn">默认按钮</button>
				<button class="btn c-grey">默认按钮</button>
				<button class="btn c-dark">默认按钮</button>
				<button class="btn c-blue">默认按钮</button>
				<button class="btn c-orange">默认按钮</button>
				<button class="btn c-green">默认按钮</button>
				<button class="btn c-red">默认按钮</button>
				<button class="btn c-yellow">默认按钮</button>
				<button class="btn c-teal">默认按钮</button>
				<button class="btn c-violet">默认按钮</button>
				<button class="btn c-purple">默认按钮</button>
				<button class="btn c-pink">默认按钮</button>
				<button class="btn c-brown">默认按钮</button>
			</p>

			<hr class="hr" />

			<h5>实心颜色样式</h5>
			<p>
				<button class="btn btn-solid">默认按钮</button>
				<button class="btn btn-solid c-grey">默认按钮</button>
				<button class="btn btn-solid c-dark">默认按钮</button>
				<button class="btn btn-solid c-blue">默认按钮</button>
				<button class="btn btn-solid c-orange">默认按钮</button>
				<button class="btn btn-solid c-green">默认按钮</button>
				<button class="btn btn-solid c-red">默认按钮</button>
				<button class="btn btn-solid c-yellow">默认按钮</button>
				<button class="btn btn-solid c-teal">默认按钮</button>
				<button class="btn btn-solid c-violet">默认按钮</button>
				<button class="btn btn-solid c-purple">默认按钮</button>
				<button class="btn btn-solid c-pink">默认按钮</button>
				<button class="btn btn-solid c-brown">默认按钮</button>
			</p>

			<hr class="hr" />

			<h5>尺寸方案</h5>
			<p>
				<a class="btn sm">a标签按钮(小按钮)</a>
				<b class="btn">b标签按钮</b>
				<span class="btn lg">span标签按钮(大按钮)</span>
			</p>

			<hr class="hr" />

			<h5>圆角方案</h5>
			<p>
				<a class="btn round c-blue sm">a标签按钮(小按钮)</a>
				<b class="btn round c-yellow">b标签按钮</b>
				<span class="btn round c-pink lg">span标签按钮(大按钮)</span>
			</p>

			<hr class="hr" />

			<h5>方角方案</h5>
			<p>
				<a class="btn square c-brown sm">a标签按钮(小按钮)</a>
				<b class="btn square c-teal">b标签按钮</b>
				<span class="btn square c-green lg">span标签按钮(大按钮)</span>
			</p>

			<hr class="hr" />

			<h5>系统按钮</h5>
			<p>
				<input class="btn" type="submit" value="提交按钮">
				<input class="btn" type="submit" value="重置按钮">
			</p>

			<hr class="hr" />

			<h5>图标按钮</h5>
			<p>
				<a class="btn"><i class="ico ico-alarm"></i>闹钟</a>
				<a class="btn btn-solid c-pink"><i class="ico ico-factory"></i>工厂</a>
				<a class="btn c-yellow"><i class="ico ico-play-random"></i>随机播放</a>
				<a class="btn btn-solid c-orange"><i class="ico ico-scanner"></i>扫描仪</a>
			</p>

			<hr class="hr" />

			<h5>圆形图标按钮</h5>
			<p>
				<a class="btn btn-icoround"><i class="ico ico-attachment"></i></a>
				<a class="btn c-green btn-icoround"><i class="ico ico-attachment"></i></a>
				<a class="btn btn-solid c-orange btn-icoround"><i class="ico ico-attachment"></i></a>
			</p>
			<p>
				<a class="btn c-pink btn-icoround sm"><i class="ico ico-attachment"></i></a>
				<a class="btn c-teal btn-icoround"><i class="ico ico-attachment"></i></a>
				<a class="btn c-orange btn-icoround lg"><i class="ico ico-attachment"></i></a>
			</p>

			<hr class="hr" />

			<h5>加载效果按钮</h5>
			<p>
				<a class="btn sm"><i class="loading-oneway"></i></a>
				<a class="btn"><i class="loading-oneway"></i></a>
				<a class="btn lg"><i class="loading-oneway"></i></a>
			</p>
			<p>
				<button class="btn"><i class="loading-oneway"></i></button>
				<button class="btn c-grey"><i class="loading-oneway"></i></button>
				<button class="btn c-dark"><i class="loading-oneway"></i></button>
				<button class="btn c-blue"><i class="loading-oneway"></i></button>
				<button class="btn c-orange"><i class="loading-oneway"></i></button>
				<button class="btn c-green"><i class="loading-oneway"></i></button>
				<button class="btn c-red"><i class="loading-oneway"></i></button>
				<button class="btn c-yellow"><i class="loading-oneway"></i></button>
				<button class="btn c-teal"><i class="loading-oneway"></i></button>
				<button class="btn c-violet"><i class="loading-oneway"></i></button>
				<button class="btn c-purple"><i class="loading-oneway"></i></button>
				<button class="btn c-pink"><i class="loading-oneway"></i></button>
				<button class="btn c-brown"><i class="loading-oneway"></i></button>
			</p>
			<p>
				<button class="btn btn-solid"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-grey"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-dark"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-blue"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-orange"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-green"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-red"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-yellow"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-teal"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-violet"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-purple"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-pink"><i class="loading-twoway"></i></button>
				<button class="btn btn-solid c-brown"><i class="loading-twoway"></i></button>
			</p>

		</div>
	</fieldset>

</body>
</html>
